<template>
  <div>
    <scroller ref="scroller"
              :offset-accuracy="100"
              :show-scrollbar="false"
              :loadmoreoffset="100"
              @scroll="onScroll">
      <div class="farm-info-wrap"
           ref="scrollerFirst">
        <image class="farm-top-img"
               :src="farmTopImg || 'bmlocal://assets//farm/farm_bg_default.jpg'"></image>

        <text class="icon icon-back"
              @click="goback">&#xe6a5;</text>
        <image class="farm-head-img"
               :src="farmHeadImg || 'bmlocal://assets//farm/farm_img_head_default.png'"
               @click="gohead"></image>
        <text :class="['user-auth', isAuth && 'user-auth-active']">{{isAuth ? '已实名': '未实名'}}</text>

        <div class="farm-auth">
          <image class="farm-auth-img"
                 :src="`bmlocal://assets//farm/farm_icon_auth_ic_text${authImages.ic ? '' : '_gray'}.jpg`"></image>
          <image class="farm-auth-img"
                 :src="`bmlocal://assets//farm/farm_icon_auth_organic_text${authImages.organic ? '' : '_gray'}.jpg`"></image>
          <image class="farm-auth-img"
                 :src="`bmlocal://assets//farm/farm_icon_auth_green_text${authImages.green ? '' : '_gray'}.jpg`"></image>
          <image class="farm-auth-img"
                 :src="`bmlocal://assets//farm/farm_icon_auth_nuisanceless_text${authImages.nuisanceless ? '' : '_gray'}.jpg`"></image>
          <image class="farm-auth-img"
                 :src="`bmlocal://assets//farm/farm_icon_auth_geo_text${authImages.geo ? '' : '_gray'}.jpg`"></image>
          <image class="farm-auth-img"
                 :src="`bmlocal://assets//farm/farm_icon_auth_quality_text${authImages.quality ? '' : '_gray'}.jpg`"></image>
          <image class="farm-auth-img"
                 :src="`bmlocal://assets//farm/farm_icon_auth_honor_text${authImages.ic ? '' : '_gray'}.jpg`"></image>
        </div>

        <text class="share-btn icon"
              @click="shareFarm">&#xe659; 分享</text>

        <text class="farm-name">{{farm.farmName}}</text>

        <div class="flex-row">
          <div class="flex">
            <text class="farm-cate-name">{{farm.enumCategoryName}}</text>
            <div class="farm-video-wrap">
              <div class="farm-video-item"
                   v-for="(video, v) in videos"
                   :key="v"
                   @click="goVideo(video)">
                <text class="icon farm-video-icon"
                      v-if="video.videoType === 1">&#xe60a;</text>
                <text class="icon farm-video-icon"
                      v-else>&#xe7da;</text>
                <text class="icon farm-video-text">{{video.remark}}</text>
              </div>
            </div>
          </div>

          <div class="flex-row">
            <div class="farm-num-wrap">
              <text class="farm-num-text">{{farm.dynamicSum}}</text>
              <text class="farm-num-hint">动态</text>
            </div>
            <div class="farm-num-wrap">
              <text class="farm-num-text">{{farm.shares}}</text>
              <text class="farm-num-hint">转发</text>
            </div>
            <div class="farm-num-wrap">
              <text class="farm-num-text">{{farm.likes}}</text>
              <text class="farm-num-hint">被赞</text>
            </div>
          </div>
        </div>

        <text class="icon farm-base-info"
              @click="goinfo">基本信息 &#xe6a2;</text>
      </div>

      <div class="nav-bar">
        <text v-for="(tab, t) in tabTitles"
              :key="t"
              :class="['nav-title', tabIndex === t && 'nav-title-active']"
              @click="toggleTab(t)">{{tab.title}}</text>
      </div>

      <div class="container"
           v-if="tabIndex === 0">
        <div v-for="(item, index) in dynamics"
             :key="index">
          <div class="dynamic-item">
            <image :src="item.farmImage"
                   class="dynamic-head"></image>
            <div class="flex">
              <text class="dynamic-farm-name">{{item.farmName}}</text>
              <text class="dynamic-desc">{{item.description}}</text>
              <div class="flex-row flex-wrap"
                   v-if="item.aroundImages&&item.aroundImages.length">
                <image class="dynamic-img"
                       v-for="(img, i) in item.aroundImages"
                       :key="i"
                       :src="`${img}?x-oss-process=image/resize,m_fill,h_200,w_200`"
                       @click="imagePreview(item.aroundImages, i)"></image>
              </div>
              <div class="dynamic-video"
                   v-if="item.videoUrl"
                   @click="videoPreview(item.videoUrl)">
                <image class="dynamic-video-img"
                       :src="item.thumbnailImg"></image>
                <text class="icon dynamic-play-icon">&#xe6cc;</text>
              </div>
              <text class="dynamic-address">{{item.shootAddress}}</text>
              <div class="flex-row">
                <text class="dynamic-time">{{item.friendTime}}</text>
                <text class="icon dynamic-action"
                      @click="likeDynamic(item, index)">&#xe876; {{item.likes}}</text>
                <text class="icon dynamic-action"
                      @click="shareDynamic(item, index)">&#xe659; {{item.shares}}</text>
              </div>
            </div>
          </div>
        </div>
        <vm-status v-if="!showDynamicLoadMore && !dynamics.length"></vm-status>
      </div>

      <div class="container"
           v-else-if="tabIndex === 1">
        <div v-for="(item, index) in products"
             :key="index">
          <div class="product-item">
            <image class="product-img"
                   :src="item.image"></image>
            <div>
              <text class="mb-1">{{item.productName}}</text>
              <text class="small text-muted">参考价格：{{item.unitPrice}}元/{{item.unit}}</text>
              <text class="small text-muted">年 产 量：{{item.yearOutput}}{{item.unit}}</text>
              <text class="small text-muted">上市时间：{{item.marketTime}}</text>
            </div>
          </div>
        </div>
        <div v-if="!products.length">
          <vm-status></vm-status>
        </div>
      </div>

      <div class="container"
           v-else>
        <div v-for="(item, index) in auths"
             :key="index">
          <div class="auth-item">
            <text class="mb-1">{{item.productName}}</text>
            <div class="flex-row flex-wrap"
                 v-if="item.authorizedImages">
              <image v-for="(img, index) in item.authorizedImages"
                     :key="index"
                     class="auth-img"
                     :src="`${img}?x-oss-process=image/resize,m_fill,h_100,w_100`"
                     @click="imagePreview(item.authorizedImages, index)"></image>
            </div>
          </div>
        </div>
        <div v-if="!auths.length">
          <vm-status></vm-status>
        </div>
      </div>

      <loading class="loading"
               v-if="showDynamicLoadMore"
               @loading="dynamicLoadmore"
               :display="loadinging ? 'show' : 'hide'">
        <loading-indicator class="indicator"></loading-indicator>
        <text class="indicator-text">加载中...</text>
      </loading>
    </scroller>

    <!--<wxc-tab-page ref="wxc-tab-page"
                  class="tab-page"
                  :tab-titles="tabTitles"
                  :tab-styles="tabStyles"
                  :tab-page-height="tabPageHeight"
                  title-type="text">
      <list class="container"
            ref="dynamicList"
            :showRefresh="true"
            :showLoadMore="showDynamicLoadMore"
            @refresh="dynamicRefresh"
            @loadMore="dynamicLoadmore"
            loadmoreoffset="100">
        <cell v-for="(item, index) in dynamics"
              :key="index">
          <div class="dynamic-item">
            <image :src="item.farmImage"
                   class="dynamic-head"></image>
            <div class="flex">
              <text class="dynamic-farm-name">{{item.farmName}}</text>
              <text class="dynamic-desc">{{item.description}}</text>
              <div class="flex-row flex-wrap"
                   v-if="item.aroundImages&&item.aroundImages.length">
                <image class="dynamic-img"
                       v-for="(img, i) in item.aroundImages"
                       :key="i"
                       :src="`${img}?x-oss-process=image/resize,m_fill,h_200,w_200`"
                       @click="imagePreview(item.aroundImages, i)"></image>
              </div>
              <div class="dynamic-video"
                   v-if="item.videoUrl"
                   @click="videoPreview(item.videoUrl)">
                <image class="dynamic-video-img"
                       :src="item.thumbnailImg"></image>
                <text class="icon dynamic-play-icon">&#xe6cc;</text>
              </div>
              <text class="dynamic-address">{{item.shootAddress}}</text>
              <div class="flex-row">
                <text class="dynamic-time">{{item.friendTime}}</text>
                <text class="icon dynamic-action">&#xe876; {{item.likes}}</text>
                <text class="icon dynamic-action">&#xe659; {{item.shares}}</text>
              </div>
            </div>
          </div>
        </cell>
        <cell v-if="!dynamics.length">
          <vm-status></vm-status>
        </cell>
      </list>

      <list class="container">
        <cell v-for="(item, index) in products"
              :key="index">
          <div class="product-item">
            <image class="product-img"
                   :src="item.image"></image>
            <div>
              <text class="mb-1">{{item.productName}}</text>
              <text class="small text-muted">参考价格：{{item.unitPrice}}元/{{item.unit}}</text>
              <text class="small text-muted">年 产 量：{{item.yearOutput}}{{item.unit}}</text>
              <text class="small text-muted">上市时间：{{item.marketTime}}</text>
            </div>
          </div>
        </cell>
        <cell v-if="!showDynamicLoadMore && !products.length">
          <vm-status></vm-status>
        </cell>
      </list>

      <list class="container">
        <cell v-for="(item, index) in auths"
              :key="index">
          <div class="auth-item">
            <text class="mb-1">{{item.productName}}</text>
            <div class="flex-row flex-wrap"
                 v-if="item.authorizedImages">
              <image v-for="(img, index) in item.authorizedImages"
                     :key="index"
                     class="auth-img"
                     :src="`${img}?x-oss-process=image/resize,m_fill,h_100,w_100`"
                     @click="imagePreview(item.authorizedImages, index)"></image>
            </div>
          </div>
        </cell>
        <cell v-if="!auths.length">
          <vm-status></vm-status>
        </cell>
      </list>

    </wxc-tab-page>-->

    <div class="mask"
         :style="{height: statusBarHeight + 'px'}"></div>

    <div class="top-nav"
         :style="{opacity: navOpacity, paddingTop: statusBarHeight + 'px'}">
      <text class="icon icon-back"
            @click="goback">&#xe6a5;</text>
      <text class="top-nav-title"
            @click="goTop">{{farm.farmName}}</text>
    </div>
  </div>
</template>

<script>
import { WxcTabPage, Utils } from 'weex-ui'
import { getStyles } from '../../plugins/tab-page-styles'
import VmStatus from '../../components/vm-status'
import {
  DEFAULT_CLIENT_ID,
  STORAGE_USER,
  STORAGE_FARM,
  DUFAULT_TOP_IMAGE
} from '../../plugins/constant'
import {
  getFriendlyTime
} from '../../plugins/utils'
const dom = weex.requireModule('dom')
const baseUrl = 'http://bigdata.vimi8.top' // weex.config.env.request
const videoPlayerAddress = `${baseUrl}/html/monitor-video/v1.html`

const vmMonitor = weex.requireModule('vmMonitor')

export default {
  components: {
    VmStatus,
    WxcTabPage
  },
  props: {},
  data() {
    return {
      statusBarHeight: weex.config.eros.statusBarHeight || 40,
      tabTitles: [
        { title: '动态信息' },
        { title: '基地产品' },
        { title: '信息认证' },
      ],
      tabStyles: getStyles({ width: 250 }),
      tabPageHeight: 1334,
      tabIndex: 0,
      // farmInfoTop: 0,
      farm: {},
      // 认证
      auths: [],
      authImages: {
        ic: false,
        organic: false,
        green: false,
        nuisanceless: false,
        geo: false,
        quality: false,
        honor: false
      },
      // 动态
      dynamicParams: {
        start: 1,
        size: 10,
        dynamicType: 3
      },
      dynamicTotalPages: 2,
      dynamics: [],
      // 产品
      products: [],
      navOpacity: 0,
      // 农场视频
      videos: []
    }
  },
  computed: {
    farmHeadImg() {
      const images = this.farm.images
      return (images && images.length && images[0]) || ''
    },
    farmTopImg() {
      const images = this.farm.farmTopImages
      return (images && images.length && images[0]) || ''
    },
    isAuth() {
      return +this.user.isAuth || 0
    },
    showDynamicLoadMore() {
      return this.dynamicTotalPages > this.dynamicParams.start
    }
  },
  watch: {},
  eros: {
    beforeBackAppear(params) {
      if (params && params.type === 1) {
        this.$router.setBackParams({ type: 1 })
        this.setFarm()
      }
    }
  },
  created() {
    this.tabPageHeight = Utils.env.getPageHeight()
    this.getFarm()
  },
  methods: {
    getFarm() {
      this.user = this.$storage.getSync(STORAGE_USER) || {}
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}
      this.dynamicParams.farmId = this.farm.id
      if (this.farm.id) {
        this.getAuth()
        this.dynamicRefresh()
        this.getProduct()
        this.getVideo()
      } else {
        this.$router.setBackParams({ type: 1 })
        this.$notice.toast({ message: '没有鸡场' })
      }
    },
    setFarm() {
      if (this.farm.id === DEFAULT_CLIENT_ID) { return }
      this.$http({
        method: 'GET',
        name: 'industrial.farm.info',
        data: {
          farmId: this.farm.id
        }
      }).then(res => {
        this.farm = res
        this.$event.emit(EVENT_GET_FARM, res)
        this.$storage.setSync(STORAGE_FARM, res)
      })
    },
    shareFarm() {
      this.$share.url({
        title: this.farm.farmName,
        url: `/androidh5/#/?farmId=${this.farm.id}&job=other`,
        description: this.farm.des || '',
        image: this.farmHeadImg
      })
    },
    onScroll({ contentOffset }) {
      const { y } = contentOffset
      if (y < -500) {
        this.navOpacity = 1
      } else {
        this.navOpacity = Math.abs(y) / 500
      }
    },
    goTop() {
      dom.scrollToElement(this.$refs.scrollerFirst, {})
    },
    async getAuth() {
      const res = await this.$http({
        method: 'GET',
        name: 'industrial.authorized',
        data: {
          start: 1,
          size: 200,
          farmId: this.farm.id
        }
      })
      const data = res && res.data || []
      this.auths = data
      if (!data.length) { return }

      for (const auth in data) {
        switch (auth.authorizedType) {
          case 3:
            this.authImages.quality = true
            break
          case 10:
            this.authImages.honor = true
            break
          case 7:
            this.authImages.geo = true
            break
          case 6:
            this.authImages.organic = true
            break
          case 5:
            this.authImages.green = true
            break
          case 4:
            this.authImages.nuisanceless = true
            break
          default:
            this.authImages.ic = true
            break
        }
      }
    },
    goback() {
      this.$router.back()
    },
    goinfo() {
      this.$nav.open({ name: 'farm.info' })
    },
    gohead() {
      this.$nav.open({ name: 'farm.head' })
    },
    toggleTab(index) {
      this.tabIndex = index
    },
    // 动态
    dynamicRefresh() {
      this.dynamicParams.start = 1
      this.getDynamic().then(res => {
        this.dynamics = res
      }).finally(() => {
        // this.$refs["dynamicList"].refreshEnd()
      })
    },
    dynamicLoadmore() {
      this.loadinging = true
      this.getDynamic().then(res => {
        this.dynamics.push(...res)
      }).finally(() => {
        this.loadinging = false
        // this.$refs["dynamicList"].loadMoreEnd()
      })
    },
    getDynamic() {
      return new Promise((resolve, reject) => {
        this.$http({
          method: 'GET',
          name: 'industrial.dynamic.record',
          data: this.dynamicParams,
          errorMsg: '获取动态记录失败！'
        }).then(res => {
          this.dynamicParams.start++
          this.dynamicTotalPages = res && res.totalPages || 0
          const data = (res && res.data || []).map(item => {
            item.farmImage = item.farmImg ? `${item.farmImg}?x-oss-process=image/resize,m_fill,h_100,w_100` : DUFAULT_TOP_IMAGE
            item.thumbnailImg = item.thumbnail ? `${item.thumbnail}?x-oss-process=image/resize,m_fill,h_240,w_300` : DUFAULT_TOP_IMAGE
            item.isOwner = item.farmId === this.farm.id
            item.friendTime = getFriendlyTime(item.createTime)
            item.likes = +item.likes || 0
            item.shares = +item.shares || 0
            return item
          })
          resolve(data)
        }).catch(err => {
          this.dynamicTotalPages = -1
          reject(err)
        })
      })
    },
    imagePreview(images, index) {
      this.$image.preview({ index, images })
    },
    videoPreview(url) {
      this.$picture.videoPreview({ url })
    },
    // 产品
    async getProduct() {
      const res = await this.$http({
        method: 'GET',
        name: 'industrial.farm.product',
        data: {
          start: 1,
          size: 50,
          farmId: this.farm.id,
          freeze: 0,
          shelvesStatus: 1,
          isDelete: 0
        }
      })
      const data = (res && res.data || []).map(item => {
        if (item.productImageList && item.productImageList.length) {
          item.image = `${item.productImageList[0]}?x-oss-process=image/resize,m_fill,h_100,w_100`
        } else {
          item.image = DUFAULT_TOP_IMAGE
        }
        item.marketTime = item.marketTime ? item.marketTime.substr(0, 10) : ''
        return item
      })
      this.products = data
    },
    // 视频
    getVideo() {
      this.$api.getData({
        server: 'industrial_db',
        table: 'farm_live_video',
        params: {
          'farm_id.eq': this.farm.id
        }
      }).then(res => {
        const data = (res || []).filter(item => item.live_video_url)
        this.videos = data.map(item => {
          item.videoType = 0
          return item
        })
        this.getVideoLive()
      })
    },
    // 摄像头视频
    getVideoLive() {
      this.$api.getData({
        server: 'agr_chain',
        table: 'device_info',
        params: {
          'supplier_id.eq': this.farm.id,
          'device_type.eq': 2
        }
      }).then(res => {
        const data = (res || []).map(item => {
          item.remark = `${item.house_no}号鸡舍`
          item.live_video_url = `${videoPlayerAddress}?id=${item.doid}&title=${item.remark}`
          item.videoType = 1
          return item
        })
        for (const d of data) {
          this.videos.push(d)
        }
      })
    },
    goVideo(row) {
      if (row.videoType === 0) {
        this.$router.toWebView({
          url: row.live_video_url,
          title: row.remark || '鸡舍视频',
          navShow: true
        })
      } else {
        this.goMonitorVideo(row.doid, row.remark)
      }
    },
    goMonitorVideo(deviceSn, title) {
      this.$notice.loading.show('获取视频地址...')
      this.$http({
        method: 'GET',
        // url: 'http://bigdata.vimi8.top/auth/video/proxy/getDevice',
        name: 'auth.video.rtmp.address',
        data: {
          deviceSn: deviceSn,
          pushStreamMode: 0,
          videoResolution: 0,
          videoType: 0,
          clientType: 5
        },
        errorMsg: '获取视频地址失败'
      }).then(res => {
        const url = res && res.fetchRtmpAddress
        if (url) {
          return vmMonitor.openUrl(url, title)
        }
        this.$notice.toast({ message: '没有视频地址' })
      }).finally(() => {
        this.$notice.loading.hide()
      })
    },
    // 点赞
    likeDynamic(row, index) {
      this.$http({
        method: 'PUT',
        name: 'industrial.farm.like',
        params: {
          dynamicId: row.id
        },
        errorMsg: '点赞失败，请重试！'
      }).then(res => {
        if (res === 0) {
          this.$notice.toast({ message: '已赞' })
        } else {
          this.$notice.toast({ message: '点赞成功' })
          row.likes += 1
          this.farm.likes += 1
        }
      })
    },
    // 分享
    shareDynamic(row) {
      this.$share.url({
        title: this.farm.farmName,
        url: `/androidh5/#/?farmId=${this.farm.id}&job=other`,
        description: row.description || '',
        image: this.getShareImage(row)
      }).then(() => {
        this.shareApiAdd(row)
      })
    },
    shareApiAdd(row) {
      this.$http({
        method: 'PUT',
        name: 'industrial.farm.share',
        params: {
          dynamicId: row.id
        },
        errorMsg: '分享失败，请重试！'
      }).then(res => {
        if (res === 0) {
          this.$notice.toast({ message: '已分享' })
        } else {
          this.$notice.toast({ message: '分享成功' })
          row.shares += 1
          this.farm.shares += 1
        }
      })
    },
    getShareImage(row) {
      const image = this.getFirstImage(row.aroundImages) || row.farmImg || this.getFirstImage(row.farmImgList) || 'http://www.vimi8.com/static/img/h5/img_default.png'
      return `${image}?x-oss-process=image/resize,m_fill,h_100,w_100`
    },
    getFirstImage(images) {
      return images && images.length && images[0]
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.icon {
  font-family: alicon;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex {
  flex: 1;
}
.bg-white {
  background-color: #fff;
}
.pb-3 {
  padding-bottom: 30px;
}
.mb-1 {
  margin-bottom: 10px;
}
.container {
  width: 750px;
}
.text-muted {
  color: #999;
}
.small {
  font-size: 26px;
}

.farm-info-wrap {
  // position: absolute;
  // top: 0;
  width: 750px;
  // height: 480px;
  background-color: #fff;
  margin-bottom: 5px;
  padding-bottom: 10px;
  padding-top: 50px;
}
.tab-page {
  // margin-top: 490px;
}
.farm-auth {
  flex-direction: row;
  margin-left: 200px;
  margin-top: -55px;
}
.farm-auth-img {
  width: 50px;
  height: 50px;
}
.farm-top-img {
  width: 750px;
  height: 220px;
  position: absolute;
  top: 0;
  left: 0;
}
.farm-head-img {
  width: 160px;
  height: 160px;
  border-radius: 80px;
  margin-left: 30px;
  border-width: 6px;
  border-color: rgba(255, 255, 255, 0.6);
}
.icon-back {
  color: #fff;
  font-size: 48px;
  padding: 10px;
}
.mask {
  position: fixed;
  top: 0;
  width: 750px;
  height: 60px;
  background-image: linear-gradient(to bottom, rgb(64, 64, 64), transparent);
}
.user-auth {
  width: 100px;
  text-align: center;
  background-color: $gray-300;
  font-size: 20px;
  margin-left: 60px;
  margin-top: -30px;
  margin-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
  color: $gray-500;
  border-width: 1px;
  border-color: $gray-400;
}
.user-auth-active {
  background-color: $accent-light;
  border-color: $accent;
  color: $accent-dark;
}
.farm-name {
  font-size: 34px;
  font-style: bold;
  margin-left: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.farm-cate-name {
  color: #999;
  font-size: 26px;
  margin-left: 30px;
  margin-bottom: 5px;
}
.farm-num-wrap {
  align-items: center;
  margin-right: 8px;
  margin-left: 8px;
}
.farm-num-text {
  text-align: center;
}
.farm-num-hint {
  text-align: center;
  font-size: 22px;
  color: #666;
}
.farm-video-wrap {
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 5px;
  flex-direction: row;
  flex-wrap: wrap;
}
.farm-video-item {
  border-width: 2px;
  border-color: $primary-light;
  padding-top: 10px;
  padding-bottom: 15px;
  padding-left: 2px;
  padding-right: 2px;
  margin-right: 5px;
  margin-bottom: 5px;
  border-radius: 6px;
  width: 110px;
  align-items: center;
}
.farm-video-item:active {
  background-color: $gray-200;
}
.farm-video-icon {
  font-size: 46px;
  color: $primary-light;
  margin-right: 5px;
}
.farm-video-text {
  font-size: 26px;
  color: $primary-light;
  lines: 1;
  flex: 1;
  text-align: center;
}
.farm-base-info {
  color: #999;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}
.share-btn {
  position: absolute;
  top: 226px;
  right: 20px;
  padding-left: 20px;
  padding-right: 20px;
  color: $primary;
  height: 52px;
  font-size: 26px;
  line-height: 52px;
  border-radius: 26px;
  border-width: 1px;
  border-color: $primary;
}
.share-btn:active {
  background-color: $primary-light;
}

.dynamic-item {
  width: 750px;
  flex-direction: row;
  background-color: #fff;
  padding: 20px;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.dynamic-head {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  margin-right: 20px;
}
.dynamic-farm-name {
  color: $primary;
  font-size: 28px;
}
.dynamic-desc {
  padding-top: 10px;
  font-size: 28px;
  margin-bottom: 10px;
}
.dynamic-img {
  width: 190px;
  height: 190px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.dynamic-address {
  font-size: 24px;
  color: #aaa;
  margin-bottom: 10px;
}
.dynamic-time {
  flex: 1;
  font-size: 24px;
  color: #aaa;
  margin-bottom: 10px;
  margin-right: 10px;
}
.dynamic-action {
  font-size: 26px;
  color: #999;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-width: 1px;
  border-color: $border-color;
  border-radius: 20px;
  margin-left: 10px;
}
.dynamic-video {
  margin-bottom: 10px;
}
.dynamic-video-img {
  width: 220px;
  height: 280px;
}
.dynamic-play-icon {
  font-size: 60px;
  position: absolute;
  top: 100px;
  left: 85px;
  color: #fff;
}

.product-item {
  width: 750px;
  flex-direction: row;
  padding: 20px;
  background-color: #fff;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  border-radius: 6px;
  border-width: 1px;
  border-color: $border-color;
}
.product-img {
  width: 160px;
  height: 160px;
  margin-right: 20px;
}

.auth-item {
  width: 750px;
  padding: 20px;
  background-color: #fff;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  border-radius: 6px;
  border-width: 1px;
  border-color: $border-color;
}
.auth-img {
  width: 160px;
  height: 160px;
  margin-right: 20px;
}

.nav-bar {
  flex-direction: row;
  background-color: #fff;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.nav-title {
  padding: 25px;
  flex: 1;
  color: #666;
  font-size: 28px;
  text-align: center;
  border-bottom-width: 2px;
  border-bottom-color: transparent;
}
.nav-title-active {
  color: #333;
  font-style: bold;
  border-bottom-color: $accent;
}

.loading {
  width: 750;
  flex-direction: row;
  align-items: center;
}
.indicator-text {
  color: #999;
  font-size: 42px;
  text-align: center;
}
.indicator {
  margin-top: 16px;
  height: 40px;
  width: 40px;
  color: $primary;
}

.top-nav {
  position: fixed;
  top: 0;
  width: 750px;
  flex-direction: row;
  background-color: $primary;
}
.top-nav-title {
  lines: 1;
  flex: 1;
  margin-right: 170px;
  margin-left: 100px;
  color: #fff;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
}
</style>
